<script setup lang="js">
import { ref, getCurrentInstance, defineEmits, nextTick } from "vue";
import {
  useMessage
} from "naive-ui";
const { proxy } = getCurrentInstance();

const $Message = useMessage();
const $emit = defineEmits(["change"]);

const codeList = ref(Array(6).fill("").map((item) => item));

let activeIndex = 0;

const onKeyDown = (index, e) => {
  // console.log("onKeyDown ==> ", e.keyCode, index)
  switch (e.keyCode) {
    case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57:
      codeListUp(e.keyCode - 48, index)
      break;
    case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105:
      codeListUp(e.keyCode - 96, index)
      break;
    case 8: // backspace键
      e.preventDefault();
      codeList.value[index] = "";
      if (index > 0) {
        activeIndex = index - 1;
        let input = proxy.$refs[`codeInput${index - 1}`][0];
        input.focus();
      }
      break;
    default:
      break;
  }
};

const codeListUp = (value, index) => {
  console.log("codeListUp ==> ", value, index);
  if (
    (codeList.value[index] || codeList.value[index] === 0) &&
    index + 1 < codeList.value.length
  ) {
    let input = proxy.$refs[`codeInput${index + 1}`][0];
    input.focus();
    codeList.value[index + 1] = value;
  } 
  $emit("change", codeList.value.join(""));
};

const onInput = (index) => {
  nextTick(() => {
    // console.log("onInput ==> ", index, codeList.value);
    codeList.value[index] = codeList.value[index].replace(/[^\d]/g, "");
    if (codeList.value[index]) {
      activeIndex = index + 1;
      if (activeIndex < 6) {
        let input = proxy.$refs[`codeInput${activeIndex}`][0];
        input.focus();
      }
    }
    $emit("change", codeList.value.join(""));
  });
};

const onFocus = index => {
  activeIndex = index;
};

const onPaste = e => {
  const clipboardData = e.clipboardData || window.clipboardData;
  if (clipboardData && clipboardData.getData("text")) {
    let pastedText = clipboardData.getData("text").split("");
    // console.log("pastedText:", pastedText.length);
    codeList.value = ["","","","","",""];
    if (pastedText.length === 6) {
      setTimeout(() =>{
        pastedText.forEach((v, i) => { codeList.value[i] = v });
        let input = proxy.$refs[`codeInput${5}`][0];
        input.focus();
        // console.log("codeList:", codeList.value);
        if (codeList.value.length > 5) {
          $emit("change", codeList.value.join(""));
        }
      }, 300)
    } else {
      $Message.warning("Verification code error");
    }
  }
}
</script>

<template>
  <div class="verification-code">
    <input
      v-for="(item, index) in codeList"
      :key="index"
      :ref="`codeInput${index}`"
      v-model.trim="codeList[index]"
      :class="{ 'input-no-bg': codeList[index] }"
      @keydown="onKeyDown(index, $event)"
      @input="onInput(index)"
      @focus="onFocus(index)"
      @paste="onPaste"
      maxlength="1"
    />
  </div>
</template>

<style lang="scss" scoped>
.verification-code {
  display: flex;
  justify-content: center;
  align-items: center;
}

input + input {
  margin-left: 20px;
}

input {
  padding: 20px 24px;
  width: 12px;
  height: 32px;
  font-size: 20px;
  text-align: center;
  border-radius: var(--radius-radius-6, 12px);
  border: 1px solid var(--white-100, rgba(255, 255, 255, 0.1));
  background: var(--color-white-100, rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(2px);
  color: #fff;
  &:focus {
    border-color: #7047eb;
    box-shadow: 0px 0px 2px 6px rgba(112, 71, 235, 0.25);
    background: var(--color-white-100, rgba(255, 255, 255, 0.02));
  }
}
.input-no-bg {
  background: none !important;
  backdrop-filter: blur(0px);
}
input:focus {
  outline: none;
  background: var(--color-white-100, rgba(255, 255, 255, 0.06));
  /* border-color: #7047EB;  */
}
</style>
